<template>
    <div class="expert-list-container">
        <!-- 搜索筛选区域 -->
        <div class="search-section">
            <el-card shadow="never" class="search-card">
                <div class="search-content">
                    <div class="search-left">
                        <el-form :model="searchForm" :inline="true" class="search-form">
                            <el-form-item label="专家:">
                                <el-input 
                                    v-model="searchForm.expertName" 
                                    placeholder="输入专家名称" 
                                    clearable
                                    style="width: 200px"
                                />
                            </el-form-item>
                            <el-form-item label="供应商:">
                                <el-select 
                                    v-model="searchForm.supplier" 
                                    placeholder="请选择" 
                                    clearable
                                    style="width: 150px"
                                >
                                    <el-option label="道家文化协会" value="taoist" />
                                    <el-option label="其他供应商" value="other" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="申请日期:">
                                <el-date-picker
                                    v-model="searchForm.dateRange"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="请选择日期"
                                    end-placeholder="请选择日期"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 240px"
                                />
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="search-right">
                        <el-button type="primary" @click="handleSearch">查询结果</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">
            <el-card shadow="never" class="table-card">
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    stripe
                    style="width: 100%"
                >
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="orgName" label="服务商主体" width="150" />
                    <el-table-column prop="realName" label="专家名称" width="120" />
                    <el-table-column prop="expertiseAreaList" label="服务类型" width="200">
                        <template #default="{ row }">
                            <el-tag type="info" size="small">{{ formatExpertiseAreas(row.expertiseAreaList) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="phoneNumber" label="手机" width="130" />
                    <el-table-column prop="expertCode" label="主体编号" width="180" />
                    <el-table-column prop="createTime" label="申请时间" width="180">
                        <template #default="{ row }">
                            {{ formatDateTime(row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100" align="center">
                        <template #default="{ row }">
                            <el-tag 
                                :type="getStatusType(row.status)" 
                                size="small"
                            >
                                {{ getStatusText(row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="250" align="center" fixed="right">
                        <template #default="{ row }">
                            <el-button type="warning" size="small" @click="handleView(row)">查看</el-button>
                            <el-button type="success" size="small" @click="handleAudit(row)">审核</el-button>
                            <el-button 
                                v-if="row.status === 1" 
                                type="success" 
                                size="small" 
                                @click="handleRecommend(row)"
                            >
                                推荐
                            </el-button>
                            <el-button 
                                v-if="row.status !== 1" 
                                type="info" 
                                size="small" 
                                @click="handleCancel(row)"
                            >
                                取消
                            </el-button>
                            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <el-card shadow="never" class="pagination-card">
                <div class="pagination-content">
                    <div class="pagination-info">
                        <span>总共{{ pagination.total }}条记录,当前在第{{ pagination.current }}页</span>
                    </div>
                    <el-pagination
                        v-model:current-page="pagination.current"
                        :page-size="pagination.size"
                        :total="pagination.total"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="prev, pager, next, jumper"
                        @current-change="handlePageChange"
                        @size-change="handleSizeChange"
                    />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getExpertPage, deleteExpert } from '@/api/member/expert';

const router = useRouter();

// 搜索表单
const searchForm = reactive({
    expertName: '',
    supplier: '',
    dateRange: []
});

// 表格数据
const loading = ref(false);
const tableData = ref([]);

// 分页数据
const pagination = reactive({
    current: 1,
    size: 10,
    total: 0
});

// 获取状态类型
const getStatusType = (status: number) => {
    const statusMap: { [key: number]: string } = {
        0: 'warning',  // 待审核
        1: 'success',  // 已审核
        2: 'danger',   // 已拒绝
        3: 'info'      // 已禁用
    };
    return statusMap[status] || 'info';
};

// 获取状态文本
const getStatusText = (status: number) => {
    const statusMap: { [key: number]: string } = {
        0: '待审核',
        1: '已审核',
        2: '已拒绝',
        3: '已禁用'
    };
    return statusMap[status] || '未知';
};

// 格式化擅长领域
const formatExpertiseAreas = (expertiseAreaList: string[]) => {
    if (!expertiseAreaList || expertiseAreaList.length === 0) return '-';
    return expertiseAreaList.join('、');
};

// 时间格式化
const formatDateTime = (dateStr: string) => {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }).replace(/\//g, '/');
};

// 加载数据
const loadData = async () => {
    try {
        loading.value = true;
        const params = {
            current: pagination.current,
            size: pagination.size,
            ...(searchForm.expertName && { realName: searchForm.expertName }),
            ...(searchForm.supplier && { orgName: searchForm.supplier }),
            ...(searchForm.dateRange && searchForm.dateRange.length === 2 && {
                startTime: searchForm.dateRange[0],
                endTime: searchForm.dateRange[1]
            })
        };
        
        const res = await getExpertPage(params);
        const responseData = res as any;
        
        if (responseData && responseData.code === 200 && responseData.data) {
            tableData.value = responseData.data.records || responseData.data.list || [];
            pagination.total = responseData.data.total || responseData.data.pageTotal || 0;
        } else {
            ElMessage.error('获取专家列表失败');
        }
    } catch (error) {
        console.error('加载数据失败:', error);
        ElMessage.error('网络错误，请稍后重试');
    } finally {
        loading.value = false;
    }
};

// 搜索方法
const handleSearch = () => {
    pagination.current = 1;
    loadData();
};

// 分页方法
const handlePageChange = (page: number) => {
    pagination.current = page;
    loadData();
};

const handleSizeChange = (size: number) => {
    pagination.size = size;
    pagination.current = 1;
    loadData();
};

// 查看详情
const handleView = (row: any) => {
    ElMessage.info(`查看专家 ${row.realName} 的详情`);
    // 这里可以跳转到详情页面
};

// 审核专家
const handleAudit = (row: any) => {
    router.push(`/expert-audit/${row.expertId}`);
};

// 推荐专家
const handleRecommend = (row: any) => {
    ElMessageBox.confirm(
        `确定要推荐专家 "${row.realName}" 吗？`,
        '推荐确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(() => {
        ElMessage.success('推荐成功');
        // 这里可以调用推荐API
    }).catch(() => {
        ElMessage.info('已取消推荐');
    });
};

// 取消申请
const handleCancel = (row: any) => {
    ElMessageBox.confirm(
        `确定要取消专家 "${row.realName}" 的申请吗？`,
        '取消确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage.success('取消成功');
        // 这里可以调用取消API
    }).catch(() => {
        ElMessage.info('已取消操作');
    });
};

// 删除方法
const handleDelete = async (row: any) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除专家 "${row.realName}" 吗？`,
            '删除确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        
        loading.value = true;
        const res = await deleteExpert(row.expertId);
        const responseData = res as any;
        
        if (responseData && responseData.code === 200) {
            ElMessage.success('删除成功');
            loadData();
        } else {
            ElMessage.error((responseData && responseData.msg) || '删除失败');
        }
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败，请稍后重试');
        }
    } finally {
        loading.value = false;
    }
};

// 页面初始化
onMounted(() => {
    loadData();
});
</script>

<style scoped>
.expert-list-container {
    padding: 20px;
}

/* 搜索区域 */
.search-section {
    margin-bottom: 20px;
}

.search-card {
    border-radius: 8px;
}

.search-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-form {
    margin: 0;
}

.search-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 表格区域 */
.table-section {
    margin-bottom: 20px;
}

.table-card {
    border-radius: 8px;
}

/* 分页区域 */
.pagination-section {
    margin-bottom: 20px;
}

.pagination-card {
    border-radius: 8px;
}

.pagination-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info {
    color: #606266;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .expert-list-container {
        padding: 10px;
    }
    
    .search-content {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .search-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .pagination-content {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}
</style>
